<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, minimal-ui, viewport-fit=cover">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <title>My App</title>
    <link rel="stylesheet" href="../../packages/core/css/framework7.min.css">
    <link rel="stylesheet" href="../../css/framework7-icons.css">
  </head>
  <body>
    <div id="app"></div>
    <template id="app-template">
      <f7-app>
        <f7-view main>
          <f7-page>
            <f7-navbar title="Stepper"></f7-navbar>
            <f7-block-title>Shape and size</f7-block-title>
            <f7-block strong class="text-align-center">
              <f7-row>
                <f7-col>
                  <small class="display-block">Default</small>
                  <f7-stepper></f7-stepper>
                </f7-col>
                <f7-col>
                  <small class="display-block">Round</small>
                  <f7-stepper round></f7-stepper>
                </f7-col>
              </f7-row>
      
              <f7-row class="margin-top">
                <f7-col>
                  <small class="display-block">Fill</small>
                  <f7-stepper fill></f7-stepper>
                </f7-col>
                <f7-col>
                  <small class="display-block">Round Fill</small>
                  <f7-stepper fill round></f7-stepper>
                </f7-col>
              </f7-row>
      
              <f7-row class="margin-top">
                <f7-col>
                  <small class="display-block">Small</small>
                  <f7-stepper small></f7-stepper>
                </f7-col>
                <f7-col>
                  <small class="display-block">Small Round</small>
                  <f7-stepper small round></f7-stepper>
                </f7-col>
              </f7-row>
      
              <f7-row class="margin-top">
                <f7-col>
                  <small class="display-block">Small Fill</small>
                  <f7-stepper small fill></f7-stepper>
                </f7-col>
                <f7-col>
                  <small class="display-block">Small Round Fill</small>
                  <f7-stepper small round fill></f7-stepper>
                </f7-col>
              </f7-row>
      
              <f7-row class="margin-top">
                <f7-col>
                  <small class="display-block">Big</small>
                  <f7-stepper big></f7-stepper>
                </f7-col>
                <f7-col>
                  <small class="display-block">Big Round</small>
                  <f7-stepper big round></f7-stepper>
                </f7-col>
              </f7-row>
      
              <f7-row class="margin-top">
                <f7-col>
                  <small class="display-block">Big Fill</small>
                  <f7-stepper big fill></f7-stepper>
                </f7-col>
                <f7-col>
                  <small class="display-block">Big Round Fill</small>
                  <f7-stepper big round fill></f7-stepper>
                </f7-col>
              </f7-row>
            </f7-block>
      
            <f7-block-title>Raised (MD-theme only)</f7-block-title>
            <f7-block strong class="text-align-center">
              <f7-row>
                <f7-col>
                  <small class="display-block">Default</small>
                  <f7-stepper raised></f7-stepper>
                </f7-col>
                <f7-col>
                  <small class="display-block">Round</small>
                  <f7-stepper raised round></f7-stepper>
                </f7-col>
              </f7-row>
      
              <f7-row class="margin-top">
                <f7-col>
                  <small class="display-block">Fill</small>
                  <f7-stepper raised fill></f7-stepper>
                </f7-col>
                <f7-col>
                  <small class="display-block">Round Fill</small>
                  <f7-stepper raised fill round></f7-stepper>
                </f7-col>
              </f7-row>
      
              <f7-row class="margin-top">
                <f7-col>
                  <small class="display-block">Small</small>
                  <f7-stepper raised small></f7-stepper>
                </f7-col>
                <f7-col>
                  <small class="display-block">Small Round</small>
                  <f7-stepper raised small round></f7-stepper>
                </f7-col>
              </f7-row>
      
              <f7-row class="margin-top">
                <f7-col>
                  <small class="display-block">Small Fill</small>
                  <f7-stepper raised small fill></f7-stepper>
                </f7-col>
                <f7-col>
                  <small class="display-block">Small Round Fill</small>
                  <f7-stepper raised small round fill></f7-stepper>
                </f7-col>
              </f7-row>
      
              <f7-row class="margin-top">
                <f7-col>
                  <small class="display-block">Big</small>
                  <f7-stepper raised big></f7-stepper>
                </f7-col>
                <f7-col>
                  <small class="display-block">Big Round</small>
                  <f7-stepper raised big round></f7-stepper>
                </f7-col>
              </f7-row>
      
              <f7-row class="margin-top">
                <f7-col>
                  <small class="display-block">Big Fill</small>
                  <f7-stepper raised big fill></f7-stepper>
                </f7-col>
                <f7-col>
                  <small class="display-block">Big Round Fill</small>
                  <f7-stepper raised big round fill></f7-stepper>
                </f7-col>
              </f7-row>
            </f7-block>
            <f7-block-title>Colors</f7-block-title>
            <f7-block strong class="text-align-center">
              <f7-row>
                <f7-col>
                  <f7-stepper fill color="red"></f7-stepper>
                </f7-col>
                <f7-col>
                  <f7-stepper fill round color="green"></f7-stepper>
                </f7-col>
              </f7-row>
      
              <f7-row class="margin-top">
                <f7-col>
                  <f7-stepper fill color="blue"></f7-stepper>
                </f7-col>
                <f7-col>
                  <f7-stepper fill round color="pink"></f7-stepper>
                </f7-col>
              </f7-row>
      
              <f7-row class="margin-top">
                <f7-col>
                  <f7-stepper fill small color="yellow"></f7-stepper>
                </f7-col>
                <f7-col>
                  <f7-stepper fill small round color="orange"></f7-stepper>
                </f7-col>
              </f7-row>
      
              <f7-row class="margin-top">
                <f7-col>
                  <f7-stepper fill small color="gray"></f7-stepper>
                </f7-col>
                <f7-col>
                  <f7-stepper fill small round color="black"></f7-stepper>
                </f7-col>
              </f7-row>
            </f7-block>
            <f7-block-title>Without input element</f7-block-title>
            <f7-block strong class="text-align-center">
              <f7-row>
                <f7-col>
                  <f7-stepper :input="false"></f7-stepper>
                </f7-col>
                <f7-col>
                  <f7-stepper :input="false" round></f7-stepper>
                </f7-col>
              </f7-row>
            </f7-block>
            <f7-block-title>Min, max, step</f7-block-title>
            <f7-block strong class="text-align-center">
              <f7-row>
                <f7-col>
                  <f7-stepper :value="100" :min="0" :max="1000" :step="100"></f7-stepper>
                </f7-col>
                <f7-col>
                  <f7-stepper :input="false" :value="5" :min="0" :max="10" :step="0.5"></f7-stepper>
                </f7-col>
              </f7-row>
            </f7-block>
      
            <f7-block-title>Autorepeat (Tap & hold)</f7-block-title>
            <f7-block-header>Pressing and holding one of its buttons increments or decrements the stepper’s value repeatedly. With dynamic autorepeat, the rate of change depends on how long the user continues pressing the control.</f7-block-header>
            <f7-block strong class="text-align-center">
              <f7-row>
                <f7-col>
                  <small class="display-block">Default</small>
                  <f7-stepper :value="0" :min="0" :max="100" :step="1" :autorepeat="true"></f7-stepper>
                </f7-col>
                <f7-col>
                  <small class="display-block">Dynamic</small>
                  <f7-stepper :value="0" :min="0" :max="100" :step="1" :autorepeat="true" :autorepeat-dynamic="true"></f7-stepper>
                </f7-col>
              </f7-row>
            </f7-block>
      
            <f7-block-title>Wraps</f7-block-title>
            <f7-block-header>In wraps mode incrementing beyond maximum value sets value to minimum value, likewise, decrementing below minimum value sets value to maximum value</f7-block-header>
            <f7-block strong class="text-align-center">
              <f7-row>
                <f7-col>
                  <f7-stepper :value="0" :min="0" :max="10" :step="1" :autorepeat="true" :wraps="true"></f7-stepper>
                </f7-col>
              </f7-row>
            </f7-block>
      
            <f7-block-title>Custom value element</f7-block-title>
            <f7-list>
              <f7-list-item :title="`Apples ${applesCount}`">
                <f7-stepper :buttons-only="true" small raised slot="after" @stepper:change="setApples"></f7-stepper>
              </f7-list-item>
              <f7-list-item :title="`Oranges ${orangesCount}`">
                <f7-stepper :buttons-only="true" small raised slot="after" @stepper:change="setOranges"></f7-stepper>
              </f7-list-item>
            </f7-list>
      
            <f7-block-title>Custom value format</f7-block-title>
            <f7-list>
              <f7-list-item header="Meeting starts in" :title="meetingTimeComputed">
                <f7-stepper
                  :min="15"
                  :max="240"
                  :step="15"
                  :value="meetingTime"
                  :buttons-only="true"
                  small
                  slot="after"
                  @stepper:change="setMeetingTime"
                ></f7-stepper>
              </f7-list-item>
            </f7-list>
      
            <f7-block-title>Manual input</f7-block-title>
            <f7-block-header>It is possible to enter value manually from keyboard or mobile keypad. When click on input field, stepper enter into manual input mode, which allow type value from keyboar and check fractional part with defined accurancy. Click outside or enter Return key, ending manual mode.</f7-block-header>
            <f7-block strong class="text-align-center">
              <f7-row>
                <f7-col>
                  <f7-stepper fill :value="0" :min="0" :max="1000" :step="1" :autorepeat="true" :wraps="true" :manual-input-mode="true" :decimal-point="2"></f7-stepper>
                </f7-col>
              </f7-row>
            </f7-block>
          </f7-page>
        </f7-view>
      </f7-app>
      
    </template>
    <script>
      var component = {
        data() {
          return {
            applesCount: 0,
            orangesCount: 0,
            meetingTime: 15,
          };
        },
        computed: {
          meetingTimeComputed() {
            const self = this;
            const value = self.meetingTime;
      
            const hours = Math.floor(value / 60);
            const minutes = value - (hours * 60);
            const formatted = [];
            if (hours > 0) {
              formatted.push(hours + ' ' + (hours > 1 ? 'hours' : 'hour'));
            }
            if (minutes > 0) {
              formatted.push(minutes + ' minutes');
            }
            return formatted.join(' ');
          },
        },
        methods: {
          setApples(value) {
            this.applesCount = value;
          },
          setOranges(value) {
            this.orangesCount = value;
          },
          setMeetingTime(value) {
            this.meetingTime = value;
          },
        },
      }
    </script>
    <script src="../../packages/vue/vue.min.js"></script>
    <script src="../../packages/vue/framework7-vue.min.js"></script>
    <script src="../../packages/core/js/framework7.min.js"></script>
    <script>
      var theme = 'ios';
      if (location.href.indexOf('theme=md') >= 0) theme = 'md';
      
      if (Framework7.use) Framework7.use(Framework7Vue, { theme: theme });
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(Framework7Vue, { theme: theme });
      
      var plugin = {
        params: {
          theme: theme,
        }
      };
      
      if (Framework7.use) Framework7.use(plugin);
      else if (Framework7.Class && Framework7.Class.use) Framework7.Class.use(plugin);
      
      if (typeof component === 'undefined') {
        var component = {};
      }
      if (typeof routes === 'undefined') {
        var routes = [];
      }
      component.el = '#app';
      component.template = '#app-template';
      
      new Vue(component);
    </script>
  </body>
</html>